<template>
    <div class="panel-tab__content">
        <el-checkbox-group v-model="checkList" @change="handleCheckedChange">
            <el-checkbox :label="1">站内信</el-checkbox>
            <el-checkbox :label="2">邮件</el-checkbox>
            <el-checkbox :label="3">短信</el-checkbox>
        </el-checkbox-group>
    </div>
</template>
<script>
export default {
    name: 'ElementButtonConfig',
    props: {
        businessObject: Object,
        id: String,
        type: String
    },
    inject: {
        prefix: "prefix",
        width: "width"
    },
    data() {
        return {
            checkList: [],
            correspondence: [{id: 1, val: '${taskCompleteMessageListener}'},{id: 2, val: 'hhh'},{id: 3, val: 'mmm'}]
        }
    },
    watch: {
         id: {
            immediate: true,
            handler(val) {
                val && val.length && this.resetAttributesList();
            }
        }
    },
    methods: {
         resetAttributesList() {
            this.bpmnElement = window.bpmnInstances.bpmnElement;
            this.otherExtensionList = []; // 其他扩展配置
             this.bpmnElementProperties =
                this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => {
                if (ex.$type !== `${this.prefix}:TaskListener`) {
                    this.otherExtensionList.push(ex);
                }
                return ex.$type === `${this.prefix}:TaskListener`;
                }) ?? [];
             // 保存所有的 扩展属性字段
            this.bpmnElementPropertyList = this.bpmnElementProperties.reduce((pre, current) => pre.concat(current), []);
            const arr = [],arr1 = []
            this.bpmnElementPropertyList.map((item) => {return arr.push(item.delegateExpression)})
            if(arr.length > 0){
                arr.map((item)=> {
                    this.correspondence.map((value) => {
                        if(value.val == item){
                            arr1.push(value.id)
                        }
                    })
                    
                })
            }
            this.checkList = arr1
        },
     
        handleCheckedChange(val) {
            let data,arr = [],dataList = [];
            if(val.length > 0 ){
                 val.map((item)=> {
                    this.correspondence.map((value) => {
                        if(value.id == item){
                            arr.push(value.val)
                        }
                    })
                    
                })
                arr.map((_) => {
                     data  = window.bpmnInstances.moddle.create(`${this.prefix}:TaskListener`, { event: 'assignment',delegateExpression: _});
                     dataList.push(data)
                })
            }else{
                dataList  = window.bpmnInstances.moddle.create(`${this.prefix}:TaskListener`, { event: 'assignment',delegateExpression: ''});
            }
           
            this.updateElementExtensions(dataList);
            this.resetAttributesList();
        },
         updateElementExtensions(properties) {
            const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
                values: this.otherExtensionList.concat(properties)
            });
            window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
                extensionElements: extensions
            });
            }
    },

}
</script>